<template>
  <div class="register">
    <div class="top">
      <div class="name">{{ hospitalDetal.hospitalInfo.hospital?.hosname }}</div>
      <div class="level">
        <svg t="1716365876801" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2627" width="16" height="16"><path d="M621.674667 408.021333c16.618667-74.24 28.224-127.936 34.837333-161.194666C673.152 163.093333 629.941333 85.333333 544.298667 85.333333c-77.226667 0-116.010667 38.378667-138.88 115.093334l-0.586667 2.24c-13.728 62.058667-34.72 110.165333-62.506667 144.586666a158.261333 158.261333 0 0 1-119.733333 58.965334l-21.909333 0.469333C148.437333 407.808 106.666667 450.816 106.666667 503.498667V821.333333c0 64.8 52.106667 117.333333 116.394666 117.333334h412.522667c84.736 0 160.373333-53.568 189.12-133.92l85.696-239.584c21.802667-60.96-9.536-128.202667-70.005333-150.186667a115.552 115.552 0 0 0-39.488-6.954667H621.674667z" fill="#d81e06" p-id="2628"></path></svg>
        {{ hospitalDetal.hospitalInfo.hospital?.param.hostypeString }}
      </div>
    </div>
    <div class="content">
      <div class="left">
        <img :src="`data:image/jpeg;base64,`+hospitalDetal.hospitalInfo.hospital?.logoData" alt="">
      </div>
      <div class="right">
        <div>
          挂号规则
        </div>
        <div class="time">
          预约周期：10天 放号事件：{{ hospitalDetal.hospitalInfo.bookingRule?.releaseTime}} 停挂时间：{{ hospitalDetal.hospitalInfo.bookingRule?.stopTime }}
        </div>
        <div class="address">
          具体位置：{{ hospitalDetal.hospitalInfo.hospital?.param.fullAddress }}
        </div>
        <div class="route">
          具体路线：{{ hospitalDetal.hospitalInfo.hospital?.route }}
        </div>
        <div class="stoptime">
          退号时间：{{ hospitalDetal.hospitalInfo.bookingRule?.quitTime }}
        </div>
        <div class="ruler">预约挂号规则</div>
        <div class="rulerInfo" v-for="(item,index) in hospitalDetal.hospitalInfo.bookingRule?.rule" :key="index">{{ item }}</div>
      </div>
    </div>
    <div class="department">
      <div class="leftNav">
        <ul>
          <li @click="changeActive(index)" v-for="(item,index) in hospitalDetal.departmentInfo" :key="item.depcode" :class="{active:activeFlag==index}">{{ item.depname }}</li>
        </ul>
      </div>
      <div class="rightNav">
        <!-- 大科室+小科室 -->
        <div class="showDepartment" v-for="department in hospitalDetal.departmentInfo" :key="department.depcode">
          <h1 class="cur">{{ department.depname }}</h1>
          <!-- 大科室下的小科室 -->
          <ul>
            <li @click="login(item)" v-for="item in department.children " :key="item.depcode">{{ item.depname }}</li>
          </ul>
        </div>
      </div>
    </div>

  </div>
</template>
<script setup lang="ts">
import useDetailStore from '@/store/modules/hospitalDetail';
import {ref} from 'vue';
import { useRouter,useRoute } from 'vue-router';
let hospitalDetal=useDetailStore()
let activeFlag=ref<number>(0);
let $router=useRouter()
let $route=useRoute()
let changeActive=(index:number)=>{
  activeFlag.value=index;
  // 利用原生js实现点击滚动
  let allH1=document.querySelectorAll('.cur');
  allH1[activeFlag.value].scrollIntoView({
    behavior:'smooth'
  })
}
let login=(item:any)=>{
  // 跳转到预约挂号界面
  $router.push({path:'/hospital/register_step1',query:{hoscode:$route.query.hoscode,depcode:item.depcode}})
}

</script>
<style lang="scss" scoped>
.register{
  .top{
    display: flex;
    .name{
      font-size: 30px;
    }
    .level{
      color: #7f7f7f;
      margin-left: 10px;
      height: 40px;
      text-align: center;
      line-height: 40px;
    }
  }
  .content{
    display: flex;
    margin-top: 20px;
    .left{
      width:80px;
      margin-right: 10px;
      img{
        width:80px;
        height: 80px;
        
      }
    }
    .right{
      flex: 1;
      font-size: 14px;
      color: #7f7f7f;
      .time{
        margin-top: 10px;
        color: #7f7f7f;
      }
    }
  }
  .department{
    display: flex;
    width: 100%;
    height: 500px;
    margin-top: 20px;
    .leftNav{
      width: 80px;
      height: 100%;
      ul{
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        background-color: rgb(248, 248, 248);
        li{
          flex: 1;
          text-align: center;
          color: #7f7f7f;
          font-size: 10px;
          line-height: 30px;
          cursor: pointer;
          &.active{
            border-left:1px solid red;
            color: red;
            background-color: white;
          }
        }
      }
    }
    .rightNav{
      flex: 1;
      margin-left: 20px;
      height: 100%;
      // 滚动
      overflow: auto;
      // 隐身滚动条
      &::-webkit-scrollbar{
        display: none;
      }
      .showDepartment{
        h1{
          background-color:  rgb(248, 248, 248);
          color:#7f7f7f;
        }
        ul{
          display: flex;
          flex-wrap: wrap;
          li{
            width: 33%;
            color: #7f7f7f;
            line-height: 30px;
          }
        }
      }
    }
  }
}



</style>
